<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>分销商销售统计</span>
</div>
<el-row>

<el-form :inline="true" >
	<el-form-item >
		<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
    </el-form-item>

    <el-form-item >
	    <el-select v-model="fx_level"  placeholder="分销级别">
	      <el-option
	      	v-for="item in distributionLevelList"
	       :label="item.title" :value="item.code"></el-option>
	    </el-select>
	</el-form-item>

	<el-form-item >
	    <el-select v-model="profitBelongs"  placeholder="利润所属">
	      <el-option
	      	v-for="item in belongsList"
	       :label="item.title" :value="item.code"></el-option>
	    </el-select>
	</el-form-item>

	<el-form-item>
	    <el-button type="primary" @click="onSubmit">查询</el-button>
	</el-form-item>

	<!-- <el-form-item>
	    <el-button type="success" @click="toExcel">导出Excel</el-button>
	</el-form-item> -->

</el-form>
</el-row>



<el-row>
<!-- <el-col :span="8"> -->
<el-table

    :data="showSeller"
    border
    class="fl mr20"
    style="width: 350px;">
    <el-table-column
      prop="name"
      label="昵称">
    </el-table-column>
    <el-table-column
      prop="total"
      label="总计"
      width="100">
    </el-table-column>
  </el-table>
<!-- </el-col>

<el-col :span="16"> -->
<!-- <div class="fl" style="background:#fff;"> -->
	<el-card class="box-card" style="height:530px;">
		<v-chart style="width:100%; " :options="options"/>
	</el-card>	
<!-- </div> -->

<!-- </el-col> -->
</el-row>
<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="seller.length">
    </el-pagination>
    </el-row>

</el-card>
</div>
</template>

<script>

import { mapGetters } from 'vuex'
import { date2str } from '../../config/util'
import daterange from '../../components/daterange'

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

export default {
	
	name : 'seller',
	
	data () {
		let colors = ['#d14a61', '#67C23A', '#F56C6C'];

		return {
		  	s_e : [date2str(new Date()), date2str(new Date())],

		  	incomelist : [],

		  	pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			fx_level : '1',

			distributionLevelList : [
				{code : '1', title : '一级'},
				{code : '2', title : '二级'},
			],

			profitBelongs : '1',

			belongsList : [
				{code : '1', title : '平台收入'},
				{code : '2', title : '个人收入'},
				{code : '3', title : '单数'},
			],

			options: {
		  		color : colors,

		        tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },

			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    // legend: {
			    //     data:['收入']
			    // },
			    grid: {
			        left: '30px',
			        // right: '100px',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: [
			        {
			            type: 'value',
			            //name: '收入',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            axisLine: {
			                lineStyle: {
			                    color: colors[0]
			                }
			            },
			            
			        }
			    ],
			    yAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                type: 'shadow'
			            }
			        }
			    ],
			    series: [
			    	{
						'name' : '',
						'type' : 'bar',
						'data' : []
					}
			    ],
		    },
		}
	},

	props : {

	},

	components : {
		daterange,
		'v-chart': ECharts,
	},

	computed : {
		...mapGetters([

		]),

		seller () {

			let arr = [];

			let obj = {};

			this.incomelist.forEach(item => {
				let key = item.openid;
				let nickname = item.nickname;
				if(this.fx_level == '2'){
					key = item.openid1;
					nickname = item.nickname1;
				}

				let total_price = item.total_price;
				if(this.profitBelongs == '2'){
					if(this.fx_level == '1'){
						total_price = item.one_price;
					}else{
						total_price = item.two_price;
					}
				}else if(this.profitBelongs == '3'){	//统计单数
					total_price = item.num;
				}

				if(obj.hasOwnProperty(key)){
					obj[key].total += total_price;
					obj[key].list.push(item);
				}else{
					obj[key] = {
						openid : key,
						name : nickname == undefined ? '商城' : nickname ,
						total : total_price,
						list : [item],
					}
				}
			});

			if(this.fx_level == '2' && obj.undefined != undefined){
				delete obj.undefined;
			}

			Object.keys(obj).forEach(k => {
				obj[k].total = parseFloat(obj[k].total).toFixed(2);
				arr.push(obj[k]);
			})

			arr.sort((a, b) => {
				return b.total - a.total;
			});

			// let msg = '平台收入';
			// if(this.profitBelongs == '2'){
			// 	msg = '个人收入';
			// }else if(this.profitBelongs == '3'){	//统计单数
			// 	msg = '单数';
			// }

			// this.options.legend.data[0] = msg;

			return arr;
		},

		showSeller () {

			if(this.seller.length == 0){
				return [];
			}

			const start = (this.pageNo - 1) * this.pageSize;
			const end = this.pageNo * this.pageSize;

			this.options.series[0].data = [];
			this.options.yAxis[0].data = [];

			for(let i = end - 1; i >= start; i--){
				if(i >= this.seller.length){
					continue;
				}
				let tmp = this.seller[i];
				this.options.series[0].data.push(tmp.total);
				this.options.yAxis[0].data.push(tmp.name);
			}

			return this.seller.slice(start,end);
		},

		// optionsdata () {
		// 	return {
		// 		...this.options,
		// 		series : 
		// 	}
		// },
	},

	methods : {
		init () {
			const para = {
				fun : 'fxincome',
				start_time : this.s_e[0] + ' 00:00:00',
				end_time : this.s_e[1] + ' 23:59:59',
				cb : res => {
					console.log(res);
					this.incomelist = res;
				},
				err : res => {
					this.$notify.error({
						title : '失败',
						message : res,
					});
				}
			};

			this.$store.dispatch('update', para);
		},

		onSubmit () {
			this.init();
		},

		toExcel () {},

		handleSizeChange (val) {
			this.pageSize = val;
		},

		handleCurrentChange (val) {
			this.pageNo = val;
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
